<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="card-title">学生详情</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="$router.go(-1)">返回</el-button>
      </div>
      
      <!-- 个人基本信息模块 -->
      <el-card class="module-card" shadow="never">
        <div slot="header" class="clearfix">
          <span class="module-title">
            <i class="el-icon-user"></i>
            个人基本信息
          </span>
        </div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="学生ID">{{ studentInfo.studentId }}</el-descriptions-item>
          <el-descriptions-item label="学生姓名">{{ studentInfo.studentName }}</el-descriptions-item>
          <el-descriptions-item label="性别">
            <dict-tag :options="dict.type.sys_user_sex" :value="studentInfo.sex"/>
          </el-descriptions-item>
          <el-descriptions-item label="头像">
            <image-preview v-if="studentInfo.avatar" :src="studentInfo.avatar" :width="50" :height="50"/>
            <span v-else>无</span>
          </el-descriptions-item>
          <el-descriptions-item label="个人介绍" :span="2">
            <div v-html="studentInfo.introduction" class="introduction-content"></div>
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="studentInfo.status === '0' ? 'success' : 'danger'">
              {{ studentInfo.status === '0' ? '正常' : '停用' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ studentInfo.createTime }}</el-descriptions-item>
          <el-descriptions-item label="备注" :span="2">{{ studentInfo.remark || '无' }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 论文基本信息模块 -->
      <el-card class="module-card" shadow="never">
        <div slot="header" class="clearfix">
          <span class="module-title">
            <i class="el-icon-document"></i>
            论文基本信息
          </span>
        </div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="论文标题">{{ paperInfo.title || '暂无数据' }}</el-descriptions-item>
          <el-descriptions-item label="论文作者">{{ paperInfo.author || '暂无数据' }}</el-descriptions-item>
          <el-descriptions-item label="指导教师">{{ paperInfo.advisor || '暂无数据' }}</el-descriptions-item>
          <el-descriptions-item label="研究方向">{{ paperInfo.researchField || '暂无数据' }}</el-descriptions-item>
          <el-descriptions-item label="论文类型">{{ paperInfo.type || '暂无数据' }}</el-descriptions-item>
          <el-descriptions-item label="提交日期">{{ paperInfo.submitDate || '暂无数据' }}</el-descriptions-item>
          <el-descriptions-item label="论文状态">
            <el-tag :type="getPaperStatusType(paperInfo.status)">
              {{ paperInfo.status || '未知' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="关键词" :span="2">{{ paperInfo.keywords || '暂无数据' }}</el-descriptions-item>
          <el-descriptions-item label="摘要" :span="2">
            <div class="abstract-content">{{ paperInfo.abstract || '暂无数据' }}</div>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 论文结论模块 -->
      <el-card class="module-card" shadow="never">
        <div slot="header" class="clearfix">
          <span class="module-title">
            <i class="el-icon-edit-outline"></i>
            论文结论
          </span>
        </div>
        <div class="conclusion-content">
          <div v-if="paperInfo.conclusion" class="conclusion-text">
            <h4>主要结论：</h4>
            <div v-html="paperInfo.conclusion" class="conclusion-detail"></div>
          </div>
          <div v-else class="no-data">
            <i class="el-icon-info"></i>
            <span>暂无论文结论信息</span>
          </div>
        </div>
        
        <!-- 研究成果展示 -->
        <div v-if="paperInfo.researchResults" class="research-results">
          <h4>研究成果：</h4>
          <el-timeline>
            <el-timeline-item
              v-for="(result, index) in paperInfo.researchResults"
              :key="index"
              :timestamp="result.date"
              placement="top">
              <el-card>
                <h4>{{ result.title }}</h4>
                <p>{{ result.description }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-card>
    </el-card>
  </div>
</template>

<script>
import { getStudent } from "@/api/system/student"

export default {
  name: "StudentDetail",
  dicts: ['sys_user_sex'],
  data() {
    return {
      // 学生信息
      studentInfo: {},
      // 论文信息（模拟数据）
      paperInfo: {
        title: "基于深度学习的图像识别技术研究",
        author: "张三",
        advisor: "李四教授",
        researchField: "计算机视觉",
        type: "硕士论文",
        submitDate: "2023-06-15",
        status: "已通过",
        keywords: "深度学习,图像识别,计算机视觉",
        abstract: "本研究主要探讨了基于深度学习的图像识别技术在现实场景中的应用，通过构建深度卷积神经网络模型，实现了对复杂图像的高精度识别。",
        conclusion: "通过实验验证，本文提出的深度学习模型在图像识别任务中取得了显著的效果，准确率达到95%以上，为相关领域的研究提供了有价值的参考。",
        researchResults: [
          {
            date: "2023-03-15",
            title: "模型架构设计完成",
            description: "完成了深度卷积神经网络的基本架构设计"
          },
          {
            date: "2023-04-20",
            title: "数据集准备完成",
            description: "收集并标注了10万张图像数据集"
          },
          {
            date: "2023-05-30",
            title: "模型训练完成",
            description: "完成了模型的训练和调优工作"
          }
        ]
      }
    }
  },
  created() {
    const studentId = this.$route.params && this.$route.params.studentId
    if (studentId) {
      this.getStudentInfo(studentId)
    }
  },
  methods: {
    /** 获取学生信息 */
    getStudentInfo(studentId) {
      getStudent(studentId).then(response => {
        this.studentInfo = response.data
        // 这里可以添加获取论文信息的API调用
        // this.getPaperInfo(studentId)
      })
    },
    
    /** 获取论文状态类型 */
    getPaperStatusType(status) {
      const statusMap = {
        '已通过': 'success',
        '评审中': 'warning',
        '未通过': 'danger',
        '待提交': 'info'
      }
      return statusMap[status] || 'info'
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.box-card {
  margin: 0 auto;
  max-width: 1200px;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
}

.module-card {
  margin-bottom: 20px;
}

.module-title {
  font-size: 16px;
  font-weight: bold;
  color: #409EFF;
}

.module-title i {
  margin-right: 8px;
}

.introduction-content {
  line-height: 1.6;
  max-height: 200px;
  overflow-y: auto;
}

.abstract-content {
  line-height: 1.6;
  color: #666;
}

.conclusion-content {
  min-height: 100px;
}

.conclusion-text h4 {
  margin-bottom: 10px;
  color: #333;
}

.conclusion-detail {
  line-height: 1.8;
  color: #666;
  background: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
  border-left: 4px solid #409EFF;
}

.no-data {
  text-align: center;
  color: #909399;
  padding: 40px 0;
}

.no-data i {
  font-size: 48px;
  margin-bottom: 10px;
  display: block;
}

.research-results {
  margin-top: 20px;
}

.research-results h4 {
  margin-bottom: 15px;
  color: #333;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .app-container {
    padding: 10px;
  }
  
  .module-card {
    margin-bottom: 15px;
  }
}
</style>